<template>
	<view v-if="show" class="unio2o-toutiao-follow">
		<view @click="show = false" class="bg"></view>
		<view :class="show ? 'animated zoomInUp' : ''" class="follow-alert ">
			<view class="main bg-w bdr16 pt30">
				<view class="close" @click="show = false">
					<app-icon name="iconbtn_close_black"  size="36"></app-icon>
				</view>
				<view class="ft20 ftw600 text-main text-center">
					推荐关注
				</view>

				<view class="pd30 flex space wrap">
					<view class="follow-item bg-w box-shadow bdr16 mt30" v-for="(item,index) in shopList" :key="index">
						<view class="text-center">
							<image class="follow-store-logo" :src="item.logo"></image>
						</view>
						<view class="text-center ft16 text-default mt10">{{item.name}}</view>
						<view class="flex center mt20">
							<view class="btn-qxgz flex center alcenter ft14 text-info" v-if="item.isCollected">取消关注
							</view>
							<view class="btn-gz flex center alcenter ft14 text-theme" v-else>
								<text class="iconfont iconbtn_concern ft14"></text>
								<text class="ml10">关注</text>
							</view>
						</view>
					</view>
				</view>

				<view class="box-shadow-top mt10 follow-act flex space alcenter plr30">
					<view class="flex alcenter text-theme ftw600" @click="recommendShops">
						<text class="ft18">换一批</text>
						<text class="iconfont iconbtn_huan ml20 ft18"></text>
					</view>
					<view class="follow-btn ft18 ftw600 flex center alcenter text-w">一键关注</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {},
		data() {
			return {
				show: false,
				shopList: []
			}
		},
		created() {
			setTimeout(() => {
				this.show = true;
			}, 1000);

			this.recommendShops()
		},
		methods: {
			recommendShops() {
				const list = [{
						id: 1001,
						name: "CNT旅行社(总店)",
						logo: "https://picsum.photos/200/200?travel=1",
						isCollected: true,
						category: "旅游服务",
						rating: 4.8,
						distance: "1.2km",
						address: "合肥市万达临湖苑E区",
						businessHours: "09:00-20:00",
						hotProducts: ["黄山三日游", "厦门四日游"]
					},
					{
						id: 1002,
						name: "蜀大侠火锅(包河万达店)",
						logo: "https://picsum.photos/200/200?food=1",
						isCollected: false,
						category: "美食",
						rating: 4.7,
						distance: "2.5km",
						address: "合肥市包河区万达金街3楼",
						businessHours: "10:30-22:00",
						hotProducts: ["招牌鸳鸯锅", "手工虾滑"]
					},
					{
						id: 1003,
						name: "星美国际影城(天鹅湖店)",
						logo: "https://picsum.photos/200/200?entertainment=1",
						isCollected: true,
						category: "休闲娱乐",
						rating: 4.5,
						distance: "3.8km",
						address: "合肥市政务区天鹅湖银泰城4楼",
						businessHours: "10:00-24:00",
						hotProducts: ["IMAX厅电影票", "双人观影套餐"]
					},
					{
						id: 1004,
						name: "奇乐儿童乐园(万象城店)",
						logo: "https://picsum.photos/200/200?kids=1",
						isCollected: false,
						category: "亲子乐园",
						rating: 4.6,
						distance: "1.8km",
						address: "合肥市政务区万象城3楼",
						businessHours: "09:30-21:30",
						hotProducts: ["全天畅玩亲子票", "周末主题活动"]
					},
					{
						id: 1005,
						name: "丝域养发(银泰中心店)",
						logo: "https://picsum.photos/200/200?beauty=1",
						isCollected: true,
						category: "丽人美发",
						rating: 4.9,
						distance: "0.8km",
						address: "合肥市庐阳区银泰中心B1层",
						businessHours: "10:00-21:00",
						hotProducts: ["头皮护理套餐", "防脱育发项目"]
					},
					{
						id: 1006,
						name: "力美健健身俱乐部(滨湖店)",
						logo: "https://picsum.photos/200/200?fitness=1",
						isCollected: false,
						category: "健身游泳",
						rating: 4.7,
						distance: "5.6km",
						address: "合肥市滨湖区融创茂2楼",
						businessHours: "06:30-22:30",
						hotProducts: ["月卡套餐", "私教一对一课程"]
					},
					{
						id: 1007,
						name: "巴黎春天婚纱摄影(旗舰店)",
						logo: "https://picsum.photos/200/200?wedding=1",
						isCollected: true,
						category: "结婚摄影",
						rating: 4.8,
						distance: "4.3km",
						address: "合肥市蜀山区潜山路190号",
						businessHours: "09:00-18:00",
						hotProducts: ["海景旅拍套餐", "婚纱礼服租赁"]
					},
					{
						id: 1008,
						name: "途行者户外俱乐部(天鹅湖店)",
						logo: "https://picsum.photos/200/200?travel=2",
						isCollected: false,
						category: "周边游",
						rating: 4.5,
						distance: "3.2km",
						address: "合肥市政务区蔚蓝商务港A座",
						businessHours: "09:30-18:30",
						hotProducts: ["黄山徒步套餐", "户外探险一日游"]
					},
					{
						id: 1009,
						name: "欢乐迪KTV(包河店)",
						logo: "https://picsum.photos/200/200?entertainment=2",
						isCollected: true,
						category: "休闲娱乐",
						rating: 4.6,
						distance: "2.1km",
						address: "合肥市包河区马鞍山路100号",
						businessHours: "12:00-02:00",
						hotProducts: ["小包厢欢唱套餐", "酒水零食套餐"]
					},
					{
						id: 1010,
						name: "环球假期旅行社(政务区分店)",
						logo: "https://picsum.photos/200/200?travel=3",
						isCollected: false,
						category: "旅游服务",
						rating: 4.7,
						distance: "3.5km",
						address: "合肥市政务区天鹅湖路88号",
						businessHours: "09:00-19:00",
						hotProducts: ["国内长线游", "签证办理服务"]
					}
				]
				this.shopList = this.getRandomItems(list, 4)
			},
			getRandomItems(arr, count) {
			    // 复制原数组，防止修改原数组
			    const shuffled = [...arr];
			    let i = arr.length;
			    let temp, index;
			    
			    // Fisher-Yates 洗牌算法
			    while (i--) {
			        index = Math.floor(Math.random() * (i + 1));
			        temp = shuffled[i];
			        shuffled[i] = shuffled[index];
			        shuffled[index] = temp;
			    }
			    
			    // 返回前count个元素
			    return shuffled.slice(0, count);
			}
		}
	}
</script>

<style>
	.follow-act {
		height: 160rpx;
	}

	.unio2o-toutiao-follow {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 400;
	}

	.unio2o-toutiao-follow .bg {
		position: fixed;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, .3);
		left: 0;
		top: 0;
		z-index: 401;
	}

	.follow-alert {
		position: fixed;
		width: 690rpx;
		background: rgba(0, 0, 0, .3);
		left: calc(50% - 345rpx);
		top: 50%;
		transform: translateY(-50%);
		z-index: 402;
	}

	.unio2o-toutiao-follow .main {
		width: 690rpx;
		position: relative;
	}

	.unio2o-toutiao-follow .main .close {
		position: absolute;
		right: 20rpx;
	}

	.follow-item {
		width: 300rpx;
		height: 360rpx;
	}

	.follow-store-logo {
		width: 120rpx;
		height: 120rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 60rpx;
	}

	.follow-btn {
		width: 400rpx;
		height: 96rpx;
		background: #FF6D00;
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(255, 109, 0, 0.3);
		border-radius: 60rpx;
	}
</style>